<template>
  <form @submit="() => { return false; }" class="comp-article-page" @scroll="docScroll">
    <div class="article-top">
      <div class="info-title">{{ info.title }}<img loading="lazy" class="pro-title-tag" v-for="(t, tdx) in info.tagsList" :key="tdx" :title="t.title" v-if="t.image"
        :src="t.image" alt="" /></div>
      <div class="other">
        {{info.createTimeStr}} ｜ {{info.comeFrom}}/{{info.categoryName}} ｜ {{ info.seeStr }}浏览
      </div>
      <div class="u-row">
        <div class="user">
          <a class="img-box" :href="'/user/'+info.member.id" target="_blank">
            <img loading="lazy" v-aimgd="{ avatar: info.member.avatar, id: info.member.id, w: 40, name: info.member.userName }">
          </a>
          <a class="name" :href="'/user/'+info.member.id" target="_blank">{{ info.member.userName }}
            <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover"  v-for="tag in info.member.tagsList">
              <i class="sm-tip" slot-content>{{tag.title}}</i>
              <img slot="reference" loading="lazy" class="u-m-tag" :src="tag.image" alt="">
            </el-popover>
          </a>
          <div class="tags"></div>
        </div>
        <div class="funs" v-if="userId != info.member.id">
          <a class="private-to" @click="handlePrivateTo">私信</a>
          <a class="follow-to" :class="{'active':info.isSubscribe>0}" @click="handleFollow">{{ info.isSubscribe >0 ? '已关注' : '关注' }}</a>
        </div>
      </div>

      <div class="article-con" v-html="info.content">

      </div>

      <div class="zan-row">
        <el-popover popper-class="gm-info-pop" placement="top" trigger="hover">
            <i class="sm-tip" slot-content>喜欢此内容</i>
            <a slot="reference" class="zan-btn" :class="{ 'active': info.praiseCount > 0 }" @click="handlePraiseArticle">
              <i>{{ info.praise }}</i>
            </a>
          </el-popover>
      </div>
      <div class="new-zans">
        <span class="text">最新喜欢</span>
      </div>
      <div class="new-zan-uimgs">
        <a class="item" v-for="(item, i) in lastPraiseList" :key="i"><img loading="lazy"
            v-aimgd="{ avatar: item.member.avatar, id: item.member.id, w: 40, name: item.member.userName }" /></a>
      </div>
    </div>
    <div class="tj-box">
      <div class="panel-tit">
        <span class="tit-text">相关文章</span>
        <div class="other-ops">
          <a class="jubao-btn" @click="showFeedBack=true">举报</a>
          <a class="share-btn" @click="handleShare">分享</a>
          <a class="fav-btn" @click="handleShowFav">收藏</a>
        </div>
      </div>
      <div class="xg-games">
        <a class="bdl-data-item" v-for="(item, i) in recommends" :key="i" target="_blank" :href="'/article/' + item.id">
          <img loading="lazy" :src="`https://img.gameui.net/article-${item.id}-${version(item.updateTime)}@1x216.webp`"
            :srcset="`https://img.gameui.net/article-${item.id}-${version(item.updateTime)}@1x216.webp 1x,https://img.gameui.net/article-${item.id}-${version(item.updateTime)}@2x216.webp 2x,https://img.gameui.net/article-${item.id}-${version(item.updateTime)}@3x216.webp 3x`"
            alt="">
          <div class="basic-info hid-el">
            <div class="title">{{ item.title }}</div>
            <div class="bot-desc">
              <span class="pnum">{{item.praiseStr}}</span>
              <span class="uname">{{ item.member.userName }}</span>
            </div>
          </div>
          <div class="left-icos">
            <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if='item.new'>
                <i class="sm-tip" slot-content>48小时内发布的最新内容</i>
                <img loading="lazy" slot="reference" src="../../assets/pro/common/new.png" alt="">
            </el-popover>
            <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if="item.hot">
              <i class="sm-tip" slot-content>浏览量超2万的热门内容</i>
              <img loading="lazy" slot="reference" src="../../assets/pro/common/hot.png" alt="">
            </el-popover>
            <!-- <img loading="lazy" src="../../assets/pro/common/video.png" alt="" v-if="item.videoUrl"> -->
            <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if='item.videoUrl'>
              <i class="sm-tip" slot-content>内容含视频</i>
              <img loading="lazy" slot="reference" src="../../assets/pro/common/video.png" alt="">
            </el-popover>
          </div>
          <div class="right-icos hid-el"  v-if="item.tagsList && item.tagsList.length > 0">
            <img loading="lazy" style="margin-left: 5px" v-for="(t, tdx) in item.tagsList" :key="tdx" :title="t.title" v-if="t.image" :src="t.image" alt="">
          </div>
          <div class="con-mask hid-el"></div>
        </a>
      </div>
      <!-- <div class="tj-panel">
        <div class="tit">大家都在看</div>
        <div class="tags">
          <a class="tag">战斗</a>
          <a class="tag">原神</a>
          <a class="tag">魔幻</a>
          <a class="tag">卡通</a>
          <a class="tag">战斗</a>
          <a class="tag">原神</a>
          <a class="tag">魔幻</a>
          <a class="tag">卡通</a>
          <a class="tag">战斗</a>
          <a class="tag">原神</a>
          <a class="tag">魔幻</a>
          <a class="tag">卡通</a>
        </div>
      </div> -->
    </div>

    <Comment ref="refComment" :moduleId="info.id" v-if="info.id"/>

    <div class="info-right-bar">
      <el-popover popper-class="gm-info-pop" placement="left" trigger="hover">
        <i class="sm-tip" slot-content>进入作者主页</i>
        <span slot="reference" class="rbtm user">
          <a :href="'/user/' + info.member.id" target="_blank"><img loading="lazy"
              v-aimgd="{ avatar: info.member.avatar, id: info.member.id, w: 50, name: info.member.userName }" /></a>
          <a class="follow-btn" @click="handleFollow"  title="关注TA" v-if="info.isSubscribe != 1"></a>
        </span>
      </el-popover>
      <el-popover popper-class="gm-info-pop" placement="left" trigger="hover">
        <i class="sm-tip" slot-content>发表评论</i>
        <span slot="reference" class="rbtm comment-btn" style="margin-top:30px;" @click="toCommentArea">
          <i class="num">{{ info.commentNum  }}</i>
          <i class="text">评论</i>
        </span>
      </el-popover>
      <el-popover popper-class="gm-info-pop" placement="left" trigger="hover">
        <i class="sm-tip" slot-content>喜欢此内容</i>
        <span slot="reference" class="rbtm zan-btn" :class="{ 'active': info.praiseCount > 0 }" @click="handlePraiseArticle">
          <i class="num" v-if="info.praise>0">{{ info.praise }}</i>
          <i class="text">喜欢</i>
        </span>
      </el-popover>
      <el-popover popper-class="gm-info-pop" placement="left" trigger="hover">
        <i class="sm-tip" slot-content>添加到收藏夹</i>
        <span slot="reference" class="rbtm fav-btn" :class="{ 'active': info.collectCount > 0 }" @click="handleShowFav">
          <i class="num" v-if="info.collectNum>0">{{ info.collectNum }}</i>
          <i class="text">收藏</i>
        </span>
      </el-popover>
      <el-popover popper-class="gm-info-pop" placement="left" trigger="hover">
        <i class="sm-tip" slot-content>返回到顶部</i>
        <span slot="reference" class="rbtm take-top" @click="handleTop">
        </span>
      </el-popover>
    </div>

    <!-- 私信 -->
    <a-modal v-model="showNotice" destroyOnClose centered :footer="null" :closable="false" width="860px">
      <Notice @close="showNotice = false" :privatemember="privatemember" />
    </a-modal>

    <!-- 收藏 -->
    <a-modal v-model="showFav" destroyOnClose centered :footer="null" :closable="false" width="471px">
      <Fav favmodule="ARTICLE" @close="showFav = false" :foldertype="1" :articleid="info.id" @favsucc="onFavSucc" />
    </a-modal>

    <a-modal v-model="showFeedBack" destroyOnClose centered :footer="null"  :closable="false" width="670px">
      <FeedBack ref="refFeedBack"  :targetid="info.id" :targettype="1" @close="showFeedBack=false"/>
    </a-modal>
  
    <ViewImg :url="curImgUrl" v-if="showViewImg" @close="onViewImgClose" @changepage="changePage"/>
  </form>
</template>

<script>
import ViewImg from '@/components/viewImg'
import FeedBack from '@/components/feedBack'
import Comment from '@/components/Comment'
import Face from '@/components/face'
import Fav from '@/components/Fav'
import Notice from '@/components/Notice'
import SparkMD5 from 'spark-md5'
import api from '@/api/api'
export default {
  components: { Notice, Fav, Face,Comment,FeedBack,ViewImg },
  data() {
    return {
      showIdx:0,
      isScroll:false,
      showViewImg:false,
      curImgUrl:'',
      showFeedBack:false,
      userId:'',
      replyItem:null,
      replyContent: '',
      showFav: false,
      userId: '',
      showNotice: false,
      defaultAvatar: require('../../assets/pro/default_uimg.svg'),
      info: {
        topCategory: {

        },
        imagesBean: {
          imageList: []
        },
        member: {
          tagsList:[]
        },
        tagsArray: []
      },
      currentUser: {},
      commentParams: {
        pageNum: 1,
        pageSize: 10,
        parentId: 0,
        commentId: '',
        orderByColumn: 'createTime',
        isAsc: 'desc'
      },
      fullScPraiseParam:{
          isAnimating:false,
          lastTime:0,
          CONFIG:{
          particleCount: {
              mobile: 15,
              tablet: 20, 
              desktop: 25
          },
          cooldown: 1500
          }
      },
      privatemember: {},
      recommends: [],
      lastPraiseList: [],
      comments: [],
      commentVal: '',
      commentTotal: 0
    }
  },
  props: ['id', 'model'],
  methods: {
    changePage(_dir) {
        if (_dir == 'prev') {
            if(this.showIdx==0){
                this.$amessage.warn('没有更多了~')
                return;
            }
            this.showIdx--;
        } else {
            if(this.showIdx==$('.article-con img').length-1){
                this.$amessage.warn('没有更多了~')
                return;
            }
            this.showIdx++;
        }
        
        this.curImgUrl = $($('.article-con img').get(this.showIdx)).attr('src');
    },
    createRing(likeContainer) {
      const ring = document.createElement('div');
      ring.className = 'ring';
      ring.style.animation = 'ringExpand 0.6s ease-out forwards';
      likeContainer.appendChild(ring);
      setTimeout(() => ring.remove(), 600);
    },
    createPlusOne(likeContainer) {
      const plus = document.createElement('div');
      plus.className = 'plus-one';
      plus.innerHTML = '<span style="color: #ffffff;">+</span><span style="color: #ffffff;">1</span>';
      plus.style.left = '50%';
      plus.style.top = '50%';
      plus.style.animation = 'floatUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards';
      
      likeContainer.appendChild(plus);
      setTimeout(() => plus.remove(), 1000);
    },
    createParticles(likeContainer) {
      const particleCount = 12;
      const colors = ['#ff5c84', '#ff89a8', '#ffb4b4', '#ffffff'];
      
      for (let i = 0; i < particleCount; i++) {
          const particle = document.createElement('div');
          particle.className = 'particle';
          
          const angle = (i / particleCount) * 2 * Math.PI;
          const distance = 60 + Math.random() * 40;
          const tx = Math.cos(angle) * distance;
          const ty = Math.sin(angle) * distance;
          
          particle.style.setProperty('--tx', `${tx}px`);
          particle.style.setProperty('--ty', `${ty}px`);
          particle.style.animation = 'explode 0.8s ease-out forwards';
          particle.style.background = colors[Math.floor(Math.random() * colors.length)];
          
          const size = 4 + Math.random() * 6;
          particle.style.width = `${size}px`;
          particle.style.height = `${size}px`;
          
          likeContainer.appendChild(particle);
          setTimeout(() => particle.remove(), 800);
      }
    },
      handleShowFav(){
          let ckPass=this.$bhelper.checkLogin(this);
          if(!ckPass)return;
          this.showFav=true;
      },
    onViewImgClose(){
      this.showViewImg=false;
      document.body.style.overflow='inherit';
    },
    handleShare(){
      let that=this;
      this.$copyText(location.href).then(() => {
        that.$amessage.success('分享链接已拷贝,快去分享~');
      }, () => {
        that.$amessage.error('复制失败！');
      });
    },
    async handleReply(){
      if(!this.replyContent){
        this.$amessage.warn('请输入评论内容~');
        return;
      }
      let params={ commentId: this.id, content: this.replyContent };
      if(this.replyItem)
      {
          params.parentId=this.replyItem.id;
      }
      let res = await api.addComment(params);
      if(res.code==0){
        this.replyItem={};
        this.replyContent='';
        this.$amessage.success('回复已送达，继续畅聊吧～');
      }
    },
    onFavSucc() {
      this.showFav = false;
    },
    async handleSend() {
      if (!this.commentVal) return;
      let res = await api.addComment({ commentId: this.id, content: this.commentVal });
      if (res.code == 0) {
        res.data.member = JSON.parse(decodeURIComponent(localStorage.getItem('BSIC')));
        res.data.content =this.$bhelper.replace_em(res.data.content);
        this.comments = [res.data].concat(this.comments);
        // this.comments.push(res.data);
        this.commentVal = '';
      }
    },
    toCommentArea() {
      $('body,html,.comp-article-page').animate({
            'scrollTop':$('.article-top').height()+$('.tj-box').height()
        }, 0);
        
      setTimeout(()=>{
        $('#commentVal').focus();
      },100)
    },
    docScroll(e) {
      if (this.model) {
        this.$emit('pagescroll', e.target.scrollTop);
      }

      let _scrollTop = this.$route.name == 'article' ? document.documentElement.scrollTop : $('.comp-article-page').prop('scrollTop');
      if(_scrollTop>0){
        if(!this.isScroll)
        {
          $('#app').addClass('is-scroll');
          this.isScroll=true;
        }
      }else{
        if(this.isScroll){
          $('#app').removeClass('is-scroll');
          this.isScroll=false;
        }
      }

      if (this.$route.name != 'article') {
        let jHeight = $('.comp-article-page').prop('scrollHeight') - $('.comp-article-page').prop('scrollTop')-document.documentElement.clientHeight;
        if(this.$refs['refComment'])
        {
          if (this.$refs['refComment'].scrollLoaded == false) return
          if (jHeight <= 200 && this.$refs['refComment'].hasMore) {
              this.$refs['refComment'].scrollLoaded = false;
              this.$refs['refComment'].loadMore();
          }
        }
      }
      else{
        let jHeight = document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight;
        if(this.$refs['refComment'])
        {
          if (this.$refs['refComment'].scrollLoaded == false) return
          if (jHeight <= 200 && this.$refs['refComment'].hasMore) {
              this.$refs['refComment'].scrollLoaded = false;
              this.$refs['refComment'].loadMore();
          }
        }
      }
    },
    handlePrivateTo() {
      let ckPass=this.$bhelper.checkLogin(this);
      if(!ckPass)return;
      this.privatemember = { sendName: this.info.member.userName, ...this.info.member };
      this.showNotice = true;
    },
        getRandomNumber(min, max) {
            return Math.random() * (max - min) + min;
        },
        getParticleCount() {
            const width = window.innerWidth;
            if (width <= 480) return this.fullScPraiseParam.CONFIG.particleCount.mobile;
            if (width <= 768) return this.fullScPraiseParam.CONFIG.particleCount.tablet;
            return this.fullScPraiseParam.CONFIG.particleCount.desktop;
        },
        createHearts(e) {
            const confettiContainer = document.createElement('div');
            confettiContainer.className = 'confetti-container';

            let _parent=document.querySelector('.comp-article-page');
            _parent.appendChild(confettiContainer);

            const now = Date.now();
            if (this.fullScPraiseParam.isAnimating || now - this.fullScPraiseParam.lastTime < this.fullScPraiseParam.CONFIG.cooldown) return;
            
            this.fullScPraiseParam.isAnimating = true;
            this.fullScPraiseParam.lastTime = now;

            // showToast();

            // const btn =e.target;
            let that=this;
            // btn.style.animation = 'btn-success 0.5s ease';
            // setTimeout(() => btn.style.animation = '', 500);

            const particleCount = this.getParticleCount();
            const viewportWidth = window.innerWidth;
            const spacing = viewportWidth / particleCount;

            const fragment = document.createDocumentFragment();
            let activeParticles = particleCount;

            for(let i = 0; i < particleCount; i++) {
                const heart = document.createElement('div');
                heart.className = 'heart';
                heart.textContent = '❤';
                
                const xPos = i * spacing + this.getRandomNumber(-20, 20);
                heart.style.left = `${xPos}px`;
                
                const duration = this.getRandomNumber(2, 3);
                heart.style.animationDuration = `${duration}s`;

                heart.addEventListener('animationend', () => {
                    heart.remove();
                    if (--activeParticles === 0) {
                        that.fullScPraiseParam.isAnimating = false;
                    }
                }, { once: true });

                fragment.appendChild(heart);
            }

            confettiContainer.appendChild(fragment);
        },
    async handlePraiseArticle(e) {
      let likeContainer=e.target;
      likeContainer.classList.remove('heart-bounce');
      void likeContainer.offsetWidth;

      let ckPass=this.$bhelper.checkLogin(this);
      if(!ckPass)return;
      if (this.info.praiseCount > 0) {
        let res = await api.delPraise({ type: 0, praiseId: this.id });
        if (res.code == 0) {
          this.info.praiseCount = 0;
          this.info.praise--;
          this.$amessage.success('取消喜欢~')
        }
      } else {
        let res = await api.addPraise({ type: 0, praiseId: this.id });
        if (res.code == 0) {
          this.createHearts(e.target);
          this.$bhelper.addCirRecord('FAV');
          this.$bhelper.addCirRecord('FAV-ARTICLE');
          this.$store.dispatch('setLeftMenu',[])
          this.createRing(likeContainer);
          this.createParticles(likeContainer);
          this.createPlusOne(likeContainer);
          likeContainer.classList.add('heart-bounce');

          this.info.praise++;
          this.info.praiseCount = 1;
          this.$amessage.success('已喜欢，品味不错哦～')
        }
      }
    },
    nearHisAdd() {
      let nearHisResults = localStorage.getItem('NEARBROWSERRESULT')
      if (!nearHisResults) nearHisResults = []
      else {
        nearHisResults = JSON.parse(nearHisResults)
      }
      let that = this
      let has = nearHisResults.filter((r) => {
        return r.id == that.info.id
      })
      if (nearHisResults.length >= 8) nearHisResults = nearHisResults.splice(1, 8)
      if (has.length == 0) {
        nearHisResults.push({ type: 1,pageurl:'/article/'+that.info.id, id: that.info.id, picurl: that.info.image, title: that.info.title })
      }
      localStorage.setItem('NEARBROWSERRESULT', JSON.stringify(nearHisResults))
    },
    async queryInfo() {
      if (localStorage.getItem('token')) {
        this.userId = localStorage.getItem('userId');
        this.commentParams.currentUserId = localStorage.getItem('userId');
        this.currentUser = JSON.parse(decodeURIComponent(localStorage.getItem('BSIC')));
      }
      this.commentParams.commentId = this.id;
      let res = {};
      if (this.model) {
        res = { data: this.model };
        if (res.data.videoUrl) {
          res.data.videoUrl = res.data.videoUrl.split(',');
        }
        this.info = res.data;
      } else {
        res = await api.getArticleById(this.id);
        if (res.data.videoUrl) {
          res.data.videoUrl = res.data.videoUrl.split(',');
        }
        this.info = res.data;
      }

      this.nearHisAdd();
      if (localStorage.getItem('token')) {
        this.$bhelper.add(this.info, 'article');
        this.$bhelper.addCirRecord('BROWSE');
        this.$store.dispatch('setLeftMenu',[])
      }

      res = await api.getRecommends({ id: this.id, pageNum: 1, pageSize: 10, categoryId: this.info.topCategory.id });
      this.recommends = res.data;

      this.queryComments();

      res = await api.getLastPraiseList({ praiseId: this.id, pageNum: 1, pageSize: 10, orderByColumn: 'createTime', isAsc: 'desc' });
      this.lastPraiseList = res.data;
    },
    async queryComments() {
      let that = this;
      let res = await api.getComments(this.commentParams);
      let list = res.data;
      this.commentTotal = res.total;
      list.forEach((l) => {
        l.content = that.$bhelper.replace_em(l.content);
        l.showSubMore = false;
        l.showReply = false;
        l.replayModel = {
          content: ''
        };
        if (l.commentList && l.commentList.length > 0) {
          l.commentList.forEach(s => {
            s.content = that.$bhelper.replace_em(s.content);
            s.showReply = false;
            s.replayModel = {
              content: ''
            };
          })
        }
      })
      this.comments = list;
    },
    onImgError(e) {
      e.target.src = require('../../assets/pro/default_uimg.svg');
    },
    async handleFollow() {
      let ckPass=this.$bhelper.checkLogin(this);
      if(!ckPass)return;
      if (this.info.isSubscribe > 0) {
        let res = await api.cancelFollowTo(this.info.member.id);
        if (res.code == 0) {
          this.info.isSubscribe = 0;
          this.$amessage.success('已取消，有缘再见～')
        }
      }
      else {
        let res = await api.followTo(this.info.member.id);
        if (res.code == 0) {
          this.$bhelper.addCirRecord('FOLLOW');
          this.$store.dispatch('setLeftMenu',[])
          this.info.isSubscribe = 1;
          this.$amessage.success('关注+1，灵感不断！')
        }
      }
    },
    handleTop() {
      $('html').animate(
          {
            scrollTop: 0,
          },
          0
        )
    },
    version(time) {
      let date = new Date(time)
      return date.getTime()
    },
    get_avatar_url(member = { id: '', avatar: '' }, n = 1, w = 30) {
      if (!member.id || !member.avatar) return this.defaultAvatar
      let hash = SparkMD5.hash(member.avatar).slice(0, 6)
      return `https://img.gameui.net/avatar-${member.id}-${hash}@${n}x${w}.webp`
    },
    get_avatar_urls(member = { id: '', avatar: '' }, w = 30) {
      return `${this.get_avatar_url(member, 1, w)} 1x, ${this.get_avatar_url(member, 2, w)} 2x, ${this.get_avatar_url(member, 3, w)} 3x`
    },
    handleClose() {
      this.$emit('close')
    },
    handleTagPrev() {
      this.gmTagSwiper.slidePrev()
    },
    handleTagNext() {
      this.gmTagSwiper.slideNext()
    },
    handledxVdSwiperPrev() {
      this.gmVideoSwiper.slidePrev();
    },
    handledxVdSwiperNext() {
      this.gmVideoSwiper.slideNext();
    }
  },
  computed: {
    gmswiper() {
      return this.$refs.gmCateSwiper.swiper
    },
    gmVideoSwiper() {
      return this.$refs.videoSwiper.swiper
    },
    gmTagSwiper() {
      return this.$refs.gameTagSwiper.swiper
    }
  },
  watch: {
    id(newVal) {
      this.id = newVal;
      this.queryInfo();
    }
  },
  destroyed() {
    if (this.$route.name == 'article') {
      window.removeEventListener('scroll', this.docScroll)
    }
  },
  async mounted() {
    $('.bodyView').addClass('info-detail-page');
    if(localStorage.getItem('token')){
      this.userId=localStorage.getItem('userId');
    }

    let that=this;
    $(document.body).delegate('.article-con img','click',function(e){
      that.showIdx=$('.article-con img').index($(e.target));
      
      document.body.style.overflow='hidden';
      that.curImgUrl=e.target.src;
      that.showViewImg=true;

    })

    if (this.$route.name == 'article') {
      $('.pro-page-bar').remove();
      window.addEventListener('scroll', this.docScroll)
    }

    if (this.id) {
      this.queryInfo();
    }
    $(document.body).delegate('.article-con img','error',function(e){
      
    })
    $('img').error(function () {  
      //将加载不到的图片的src属性时，修改成默认图片，注意：默认图片必须保证存在，否则会一直调用此函数，造成死循环。
      $(this).attr("src", "Image/default.jpg");  
    });
  }
}
</script>


<style scoped lang="less">
.comp-article-page {
  padding-top: 60px;
  // background: #000;
  position: relative;



  .article-top {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;

    .info-title {
      font-size: 40px;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 56px;
      text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.76);
    }

    .other {
      color: #969696;
      font-size: 12px;
      line-height: 17px;
      margin: 12px 0px 40px 0px;
    }

    .u-row {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .user {
        display: flex;
        align-items: center;

        .img-box {
          width: 40px;
          height: 40px;
          border-radius: 40px;
          overflow: hidden;
          margin-right: 15px;
          &:hover{
            img{
              transform: scale(1.08);
            }
          }
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .name {
          font-size: 16px;
          font-weight: 500;
          &:hover{
            color:#11CCB1;
            text-decoration: underline;
          }
        }
      }

      .funs {
        display: flex;
        font-size: 14px;
        align-items: center;

        .private-to {
          border: 1px solid #484848;
          border-radius: 8px;
          line-height: 34px;
          width: 70px;
        }

        .follow-to {
          margin-left: 10px;
          border-radius: 8px;
          line-height: 34px;
          width: 70px;
          color: #fff;
          transition:.1s all linear;
          &:not(.active){
            background: #11CCB1;
            border: 1px solid #11CCB1;
            :hover {
              background: #0fab94;
              border-color:#0fab94;
            }
          }
          &.active{
            border: 1px solid #484848;
          }
        }
      }
    }

    .article-con {
      margin-top: 40px;
      font-size: 14px;
      // line-height: 26px;
      text-align: left;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }


  .zan-row {
    text-align: center;
    margin-top: 119px;

    .zan-btn {
        width: 100px;
        height: 100px;
        border-radius: 100px;
        background-color: #181717;
        display: block;
        margin: 0 auto;
        background-image: url('../../assets/pro/size_big_zan.svg');
        background-position:50% 40%;
        background-size:40px 40px;
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
        position: relative;
        align-items: center;
        overflow: hidden;
        &:hover{
          background-color:#42404A;
        }
        i {
          font-style: normal;
          font-size: 14px;
          margin-top:45px;
          display: inline-block;
          color: #fff;
        }

        &.active {
          // background-color:#42404A;
          background-image: url('../../assets/pro/game/bot_zan_active.svg');
          background-position: 50% 40%;
          background-repeat: no-repeat;
        }
    }
  }

  .new-zans {
    text-align: center;
    margin: 42px 0px 25px 0px;

    .text {
      position: relative;
      color: #BBBBBB;

      &:before {
        content: '';
        height: 1px;
        width: 118px;
        background: #343434;
        position: absolute;
        left: -128px;
        top: 8px;
      }

      &:after {
        content: '';
        height: 1px;
        width: 118px;
        background: #343434;
        position: absolute;
        right: -128px;
        top: 8px;
      }
    }
  }

  .new-zan-uimgs {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;

    .item {
      width: 40px;
      height: 40px;
      border-radius: 40px;
      overflow: hidden;
      margin-right: 20px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  .tj-box {
    max-width: 1566px;
    margin: 0 auto;

    .panel-tit {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;

      .tit-text {
        font-size: 26px;
        font-weight: 500;
        line-height: 37px;
        color:#fff;
      }

      .other-ops {
        font-size: 12px;
        color: #6E6D7A;
        line-height: 26px;
        display: flex;

        .jubao-btn {
          background: url('../../assets/pro/workinfo/gray_report_icon.svg') no-repeat;
          background-position: left center;
          background-size: 18px 18px;
          padding-left: 23px;
        }

        .share-btn {
          border: 1px solid #323232;
          border-radius: 6px;
          width: 70px;
          text-align: center;
          margin: 0px 20px;
          background: url('../../assets/pro/workinfo/gray_share_icon.svg') no-repeat;
          background-position: 10px center;
          background-size: 18px 18px;
          padding-left: 23px;
        }

        .fav-btn {
          border: 1px solid #323232;
          border-radius: 6px;
          width: 70px;
          text-align: center;
          background: url('../../assets/pro/workinfo/gray_star_icon.svg') no-repeat;
          background-position: 10px center;
          background-size: 18px 18px;
          padding-left: 23px;
        }
      }
    }

    .xg-games {
      display: flex;
      flex-wrap: wrap;
      grid-gap:20px;
      .bdl-data-item {
        width: calc((100% - 80px) / 5);
        height: 223px;
        border-radius: 16px;
        overflow: hidden;
        // margin-right: 20px;
        // margin-bottom: 20px;
        position: relative;
        color: #fff;

        &:nth-child(5n) {
          margin-right: 0px;
        }

        .left-icos {
          position: absolute;
          left: 10px;
          top: 10px;
          display: flex;
          align-items: center;

          img {
            &:first-child {
              margin-right: 10px;
            }
          }
        }

        .right-icos {
          position: absolute;
          right: 10px;
          top: 10px;
          display: flex;
          align-items: center;

          img {
            &:first-child {
              // margin-right:10px;
            }
          }
        }

        >img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .basic-u-info {
          position: absolute;
          bottom: 11px;
          left: 13px;
          display: flex;
          align-items: center;
          right: 12px;
          justify-content: space-between;
          z-index: 1;

          .user {
            display: flex;
            align-items: center;

            img {
              height: 26px;
              width: 26px;
              border-radius: 26px;
              object-fit: cover;
              margin-right: 9px;
            }

            .name {
              color: #fff;
              font-size: 14px;
              font-weight: 500;
            }
          }

          .znum {
            font-size: 12px;
            background: url('../../assets/pro/dianzanicon.svg') no-repeat;
            padding-left: 26px;
            color: #fff;
          }

          .snum {
            font-size: 12px;
            background: url('../../assets/pro/yuedu_icon.svg') no-repeat;
            padding-left: 26px;
            color: #fff;
          }
        }

        .basic-info {
          position: absolute;
          bottom: 10px;
          left: 10px;
          z-index: 1;
          width: 90%;
          .title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 3px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .bot-desc {
            font-size: 12px;
            color: #fff;
            display: flex;

            .uname {
              margin-left: 32px;
            }
          }
        }

        .con-mask {
          height: 129px;
          position: absolute;
          bottom: 0px;
          left: 0px;
          right: 0px;
          background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
        }

        .hid-el {
          // display: none;
          opacity: 0;
        }

        &:hover {
          border: 2px solid #11CCB1;
          >img{
            transform: scale(1.08);
          }
          // width:293px;height:219px;
          .hid-el {
            // display: inline-block;
            opacity: 1;

            transition: .1s all linear;
          }
        }
      }
    }

    .tj-panel {
      margin-top: 30px;

      .tit {
        font-size: 26px;
        font-weight: 500;
        line-height: 37px;
        margin-bottom: 20px;
        color:#fff;
      }

      .tags {
        line-height: 38px;
        display: flex;
        align-items: center;

        .tag {
          background: #2F313D;
          color: #fff;
          padding: 0px 22px;
          border-radius: 38px;
          margin-right: 20px;
        }
      }
    }
  }


}
</style>